<template>
  <div class="line-manage">
    <Manage>
      <template #upCard>
        <el-form label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="线路编号">
                <el-input v-model="page.number" placeholder="请输入线路编号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="线路名称">
                <el-input v-model="page.name" placeholder="请输入线路名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="起始地机构">
                <Treeselect
                  v-model="page.startOrganId"
                  :options="tree"
                  :normalizer="normalizer"
                  placeholder="请选择起始地机构"
                  :append-to-body="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="目的地机构">
                <Treeselect
                  v-model="page.endOrganId"
                  :options="tree"
                  :normalizer="normalizer"
                  placeholder="请选择目的地机构"
                  :append-to-body="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" size="" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #downCard>
        <div style="margin-bottom:24px">
          <el-button type="primary" @click="addLine">新增线路</el-button>
          <el-button type="primary" @click="editCost">成本设置</el-button>
        </div>
        <el-table
          v-loading="loading"
          :data="transportLine"
          stripe
          :header-cell-style="{background:'#f8faff',color:'#818693'}"
          row-key="id"
          :expand-row-keys="expand"
          @expand-change="expandChange"
        >
          <el-table-column type="expand">
            <template #default>
              <el-table
                v-loading="onLoading"
                :data="expandTable"
                :header-cell-style="{background:'#f8faff',color:'#818693'}"
              >
                <el-table-column prop="name" label="车次名称" />
                <el-table-column label="发车频次">
                  <template #default="{row}">
                    <span>{{ row.departureTime+'/'+row.periodName }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="arriveTime" label="到达时间" />
                <el-table-column label="车辆安排">
                  <template #default="{row}">
                    <span>{{ row.truckDrivers | showTruck }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="司机安排">
                  <template #default="{row}">
                    <span>{{ row.truckDrivers | showDriver }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="314" fixed="right">
                  <template #default="">
                    <a href="javascript:void(0);" style="color:#419eff;">编辑车次</a>
                    <div class="line" />
                    <a href="javascript:void(0);" style="color:#f56c6c;">删除车次</a>
                    <div class="line" />
                    <a href="javascript:void(0);" style="color:#419eff;">安排车辆</a>
                    <div class="line" />
                    <a href="javascript:void(0);" style="color:#f56c6c;">车辆解绑</a>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="线路编号" />
          <el-table-column prop="name" label="线路名称" />
          <el-table-column prop="type" label="线路类型" :formatter="(row)=>setMap.tranportLineType.find(item=>item.id===row.type).label" />
          <el-table-column prop="startOrganName" label="起始地机构" />
          <el-table-column prop="endOrganName" label="目的地机构" />
          <el-table-column prop="distance" label="距离(千米)" />
          <el-table-column prop="cost" label="成本(元)" />
          <el-table-column prop="time" label="预计时间(分钟)" />
          <el-table-column label="操作" align="center" width="184px" fixed="right">
            <template #default="{row}">
              <a href="javascript:void(0);" style="color:#419eff;" @click="editLine(row.id)">修改</a>
              <div class="line" />
              <a href="javascript:void(0);" style="color:#f56c6c;" @click="delLine(row.id)">删除</a>
              <div class="line" />
              <a href="javascript:void(0);" style="color:#419eff;" @click="addTripts(row)">增加车次</a>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            :current-page="page.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </template>
    </Manage>
    <!-- 新增&编辑弹层 -->
    <handleDialog ref="handleLineRef" :show-line-dialog="showLineDialog" :tree="tree" />
    <!-- 成本设置 -->
    <el-dialog title="成本设置" :visible.sync="showCostDialog">
      <el-form v-if="costInfo.length" label-width="120px">
        <el-form-item label="线路类型">
          <span>每公里平均成本(元)</span>
        </el-form-item>
        <el-form-item label="干线">
          <el-input v-model="costInfo[0].cost" />
        </el-form-item>
        <el-form-item label="支线">
          <el-input v-model="costInfo[1].cost" />
        </el-form-item>
        <el-form-item label="接驳">
          <el-input v-model="costInfo[2].cost" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="subCost">确认</el-button>
          <el-button>取消</el-button>
        </el-row>
      </template>
    </el-dialog>
    <!-- 增加&编辑车次弹层 -->
    <triptsDialog ref="triptsRef" :show-tripts-dialog="showTriptsDialog" />
  </div>
</template>

<script>
import { getOrgizationTree } from '@/api/ogization'
import { delTransportLine, editCostInfo, expandTransportLine, getCost, getTransportLine } from '@/api/transport'
import setMap from '@/constant/setMap'
import handleDialog from './components/handleDialog.vue'
import triptsDialog from './components/triptsDialog.vue'
export default {
  components: {
    handleDialog,
    triptsDialog
  },
  filters: {
    showTruck(val) {
      if (val) {
        return val[0].truck.licensePlate
      }
    },
    showDriver(val) {
      if (val) {
        return val.map(item => item.driver.name).toString()
      }
    }
  },
  data() {
    return {
      setMap,
      page: {
        page: 1,
        pageSize: 10,
        number: null,
        name: null,
        startOrganId: null,
        endOrganId: null
      },
      counts: 0,
      tree: [],
      transportLine: [],
      loading: false,
      expand: [],
      expandTable: [],
      onLoading: false,
      showLineDialog: false,
      costInfo: [],
      showCostDialog: false,
      showTriptsDialog: false
    }
  },

  created() {
    this.initTree()
    this.initTransportLine()
    this.initCost()
  },
  methods: {
    // 线路管理表格
    async initTransportLine() {
      this.loading = true
      try {
        const res = await getTransportLine(this.page)
        this.transportLine = res.items
        this.counts = +res.counts
      } catch (error) {
        this.loading = false
      }
      this.loading = false
    },
    // 下拉树结构
    async initTree() {
      const res = await getOrgizationTree()
      this.tree = JSON.parse(res)
    },
    normalizer(node) {
      // 当子节点也就是children=[]时候去掉子节点
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children && node.children.length > 0 ? node.children : 0
      }
    },
    // 搜索
    search() {
      this.initTransportLine()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageSize = val
      this.initTransportLine()
    },
    handleCurrentChange(val) {
      this.page.page = val
      this.initTransportLine()
    },
    reset() {
      this.page = {
        page: 1,
        pageSize: 10,
        number: null,
        name: null,
        startOrganId: null,
        endOrganId: null

      }
      this.initTransportLine()
    },
    // 展开
    async  expandChange(row) {
      if (this.expand.includes(row.id)) {
        this.expand = []
        return
      }
      this.expand = [row.id]
      this.onLoading = true
      try {
        this.expandTable = await expandTransportLine(row.id)
      } catch (error) {
        this.onLoading = false
      }
      this.onLoading = false
    },
    // 新增线路
    addLine() {
      this.showLineDialog = true
    },
    // 修改线路
    async editLine(id) {
      this.$refs.handleLineRef.getLineDetail(id)
      this.showLineDialog = true
    },
    // 删除线路
    async delLine(id) {
      await this.$confirm('确认删除吗')
      await delTransportLine(id)
      this.$message.success('删除成功')
    },
    // 成本信息
    async initCost() {
      this.costInfo = await getCost()
    },
    // 显示成本
    editCost() {
      this.showCostDialog = true
    },
    // 修改成本
    async subCost() {
      console.log(this.costInfo)
      await editCostInfo(this.costInfo)
      this.$message.success('修改成功')
      this.showCostDialog = false
    },
    // 增加车次
    addTripts(row) {
      console.log(row)
      this.$refs.triptsRef.name = row.name
      this.$refs.triptsRef.tripts.transportLineId = row.id
      this.showTriptsDialog = true
    }
  }

}
</script>

<style lang="scss" scoped>
.line-manage{
  ::v-deep .el-dialog__body{
    padding: 40px 66px 0 50px;
  }
}
</style>
